<template>
	<view class="details-container">
		<!-- 商品图片轮播 -->
		<view class="product-images">
			<swiper circular :indicator-dots="true" :autoplay="false" :duration="500" class="swiper">
				<swiper-item v-for="(img, index) in productImages" :key="index">
					<image :src="img" mode="aspectFill" class="product-image"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 商品基本信息 -->
		<view class="product-info">
			<view class="product-title">{{prodetail.proname}}</view>
			<view class="product-subtitle">{{prodetail.category}}</view>
			<view class="price-section">
				<view class="current-price">￥{{prodetail.originprice}}</view>
				<view class="original-price">￥{{productDetail.sales}}</view>
				<view class="discount">{{discount}}折</view>
			</view>
			<view class="sales-info">
				<text>已售 {{prodetail.sales}} 件</text>
				<text>库存 {{prodetail.stock}} 件</text>
			</view>
		</view>

		<!-- 规格选择 -->
		<view class="spec-section">
			<view class="spec-title">选择规格</view>
			<view class="spec-options">
				<view v-for="(spec, index) in specs" :key="index"
					:class="['spec-item', {active: selectedSpec === index}]" @click="selectSpec(index)">
					{{spec}}
				</view>
			</view>
		</view>

		<!-- 数量选择 -->
		<view class="quantity-section">
			<view class="quantity-title">数量</view>
			<view class="quantity-controls">
				<view class="quantity-btn" @click="decreaseQuantity">-</view>
				<view class="quantity-input">{{quantity}}</view>
				<view class="quantity-btn" @click="increaseQuantity">+</view>
			</view>
		</view>

		<!-- 商品详情 -->
		<view class="product-details">
			<view class="details-title">商品详情</view>
			<view class="details-content">
				<view class="detail-item">
					<text class="detail-label">品牌：</text>
					<text class="detail-value">{{productDetail.brand}}</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">产地：</text>
					<text class="detail-value">{{productDetail.origin}}</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">保质期：</text>
					<text class="detail-value">{{productDetail.shelfLife}}</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">重量：</text>
					<text class="detail-value">{{productDetail.weight}}</text>
				</view>
			</view>
		</view>

		<!-- 商品描述图片 -->
		<view class="product-description">
			<view class="description-title">图文详情</view>
			<view class="description-images">
				<image v-for="(img, index) in productImages" :key="index" :src="img" mode="widthFix"
					class="description-image"></image>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-actions">
			<view class="action-btn customer-service" @click="contactService">
				<view class="btn-icon">💬</view>
				<view class="btn-text">客服</view>
			</view>
			<view class="action-btn collect" @click="toggleCollect">
				<view class="btn-icon">{{isCollected ? '❤️' : '🤍'}}</view>
				<view class="btn-text">{{isCollected ? '已收藏' : '收藏'}}</view>
			</view>
			<view class="action-btn add-cart" @click="addToCart">
				加入购物车
			</view>
			<view class="action-btn buy-now" @click="buyNow">
				立即购买
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		useCounterStore
	} from '@/stores/counter'

	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		computed
	} from 'vue';

	const proid = ref('')
	const quantity = ref(1)
	const selectedSpec = ref(0)
	const isCollected = ref(false)
	const prodetail = ref({})
	const counter = useCounterStore()
	const token = ref('')

	// 商品详情数据
	const productDetail = ref({
		proname: '优质有机苹果 新鲜水果',
		subtitle: '香甜脆嫩，营养丰富，产地直供',
		originprice: 29.9,
		oldprice: 39.9,
		sales: 1256,
		stock: 999,
		brand: '果园直供',
		origin: '山东烟台',
		shelfLife: '7天',
		weight: '500g/盒'
	})

	// 商品图片
	const productImages = ref([])

	// 规格选项
	const specs = ref(['小号', '中号', '大号'])

	// 商品描述图片

	// 计算折扣
	const discount = computed(() => {
		return Math.floor((productDetail.value.originprice / productDetail.value.oldprice) * 10)
	})

	onLoad(function(options) {
		console.log(options.id);
		proid.value = options.id
		getpordetailFn()
		// 这里可以根据商品ID获取商品详情
		// getProductDetail(options.id)
	})

	function getpordetailFn() {
		uni.request({
			url: "http://47.94.6.186:3001/api/pro/detail/" + proid.value,
			method: "get",
			data: {
				proid: proid.value
			},
			success(r) {
				console.log(r.data)
				prodetail.value = r.data.data
				console.log(prodetail.value)
				productImages.value = r.data.data.imgs
				console.log(productImages.value)
				token.value = uni.getStorageSync("token")
				console.log(token.value)
			}
		})
	}

	// 选择规格
	function selectSpec(index) {
		selectedSpec.value = index
	}

	// 增加数量
	function increaseQuantity() {
		if (quantity.value < productDetail.value.stock) {
			quantity.value++
		}
	}

	// 减少数量
	function decreaseQuantity() {
		if (quantity.value > 1) {
			quantity.value--
		}
	}

	// 切换收藏状态
	function toggleCollect() {
		isCollected.value = !isCollected.value
		uni.showToast({
			title: isCollected.value ? '收藏成功' : '取消收藏',
			icon: 'success'
		})
	}

	// 联系客服
	function contactService() {
		uni.showToast({
			title: '正在为您转接客服',
			icon: 'none'
		})
	}

	// 加入购物车
	function addToCart() {
		uni.request({
			url: "http://47.94.6.186:3001/api/cart/add",
			method: "POST",
			header: {
				"token": token.value
			},
			data: {
				userid: counter.userid,
				proid: proid.value,
				num: quantity.value
			},
			success(r) {
				console.log(r.data)
				uni.showToast({
					title: '已加入购物车',
					icon: 'success'
				})
			}
		})

	}

	// 立即购买
	function buyNow() {
		uni.showToast({
			title: '正在跳转支付页面',
			icon: 'none'
		})
	}
</script>

<style>
	* {
		padding: 0rpx;
		margin: 0rpx;
		box-sizing: border-box;
	}

	.details-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	/* 商品图片轮播 */
	.product-images {
		background-color: #fff;
	}

	.swiper {
		height: 750rpx;
	}

	.product-image {
		width: 100%;
		height: 100%;
	}

	/* 商品基本信息 */
	.product-info {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.product-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		line-height: 1.4;
		margin-bottom: 10rpx;
	}

	.product-subtitle {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
	}

	.price-section {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.current-price {
		font-size: 48rpx;
		color: #ff4444;
		font-weight: bold;
		margin-right: 20rpx;
	}

	.original-price {
		font-size: 28rpx;
		color: #999;
		text-decoration: line-through;
		margin-right: 20rpx;
	}

	.discount {
		background-color: #ff4444;
		color: #fff;
		font-size: 24rpx;
		padding: 4rpx 8rpx;
		border-radius: 6rpx;
	}

	.sales-info {
		font-size: 26rpx;
		color: #666;
	}

	.sales-info text {
		margin-right: 40rpx;
	}

	/* 规格选择 */
	.spec-section {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.spec-title {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 20rpx;
	}

	.spec-options {
		display: flex;
		flex-wrap: wrap;
	}

	.spec-item {
		padding: 16rpx 32rpx;
		border: 2rpx solid #ddd;
		border-radius: 8rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		color: #333;
	}

	.spec-item.active {
		border-color: #ff4444;
		color: #ff4444;
		background-color: #fff5f5;
	}

	/* 数量选择 */
	.quantity-section {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.quantity-title {
		font-size: 32rpx;
		color: #333;
	}

	.quantity-controls {
		display: flex;
		align-items: center;
	}

	.quantity-btn {
		width: 60rpx;
		height: 60rpx;
		border: 2rpx solid #ddd;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #333;
	}

	.quantity-input {
		width: 80rpx;
		height: 60rpx;
		border-top: 2rpx solid #ddd;
		border-bottom: 2rpx solid #ddd;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}

	/* 商品详情 */
	.product-details {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.details-title {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 20rpx;
		font-weight: bold;
	}

	.detail-item {
		display: flex;
		padding: 16rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.detail-item:last-child {
		border-bottom: none;
	}

	.detail-label {
		width: 160rpx;
		font-size: 28rpx;
		color: #666;
	}

	.detail-value {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	/* 商品描述 */
	.product-description {
		background-color: #fff;
		padding: 30rpx;
	}

	.description-title {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 20rpx;
		font-weight: bold;
	}

	.description-image {
		width: 100%;
		margin-bottom: 20rpx;
	}

	/* 底部操作栏 */
	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-top: 1rpx solid #eee;
		z-index: 999;
	}

	.action-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #666;
	}

	.customer-service,
	.collect {
		width: 120rpx;
		height: 80rpx;
	}

	.btn-icon {
		font-size: 32rpx;
		margin-bottom: 8rpx;
	}

	.btn-text {
		font-size: 20rpx;
	}

	.add-cart {
		flex: 1;
		height: 80rpx;
		background-color: #ff9500;
		color: #fff;
		margin: 0 20rpx;
		border-radius: 40rpx;
		font-size: 32rpx;
	}

	.buy-now {
		flex: 1;
		height: 80rpx;
		background-color: #ff4444;
		color: #fff;
		border-radius: 40rpx;
		font-size: 32rpx;
	}
</style>